<template>
  <div class="workspace-container">
    <!-- 默认工作区（当无自定义组件时显示） -->
    <template v-if="!customComponents.length">
      <el-tabs type="border-card">
        <el-tab-pane label="待办任务">
          <todo-list :project-id="projectId"></todo-list>
        </el-tab-pane>
        <el-tab-pane label="项目资料">
          <doc-list :project-id="projectId"></doc-list>
        </el-tab-pane>
        <el-tab-pane label="常用信息">
          <project-info :project-id="projectId"></project-info>
        </el-tab-pane>
      </el-tabs>
    </template>

    <!-- 自定义工作区 -->
    <component 
      v-for="comp in customComponents"
      :is="comp.component"
      :key="comp.id"
      :project-id="projectId">
    </component>

    <!-- 工作区配置按钮（开发用） -->
    <el-button 
      v-if="isDevMode"
      @click="showConfigDialog=true"
      style="position: fixed; right: 20px; bottom: 20px;">
      <i class="el-icon-setting"></i>
    </el-button>

    <!-- 工作区配置对话框 -->
    <el-dialog title="工作区配置" :visible.sync="showConfigDialog">
      <workspace-config 
        @add-component="handleAddComponent">
      </workspace-config>
    </el-dialog>
  </div>
</template>

<script>
import TodoList from '../widgets/TodoList.vue'
import DocList from '../widgets/DocList.vue'
import ProjectInfo from '../widgets/ProjectInfo.vue'
import WorkspaceConfig from '../widgets/WorkspaceConfig.vue'

export default {
  components: { TodoList, DocList, ProjectInfo, WorkspaceConfig },
  props: ['projectId'],
  data() {
    return {
      isDevMode: process.env.NODE_ENV === 'development',
      showConfigDialog: false,
      customComponents: []
    }
  },
  methods: {
    handleAddComponent(component) {
      this.customComponents.push({
        id: Date.now(),
        component
      })
    },
 loadData() {
    if (!this.projectId) {
      this.resetData();
      return;
    }

    // 从localStorage同步加载所有数据
    try {
      // 加载文档数据
      const docsData = localStorage.getItem(`documents_${this.projectId}`);
      this.documents = docsData ? JSON.parse(docsData) : [];
      
      // 加载待办事项
      const todosData = localStorage.getItem(`todos_${this.projectId}`);
      this.todos = todosData ? JSON.parse(todosData) : [];
      
      // 加载项目信息
      const infoData = localStorage.getItem(`projectInfo_${this.projectId}`);
      this.projectInfo = infoData ? JSON.parse(infoData) : {};
      
    } catch (error) {
      console.error('从本地存储加载数据失败:', error);
      this.resetData();
    }
  },
    
    resetData() {
      this.documents = []
      this.todos = []
      this.projectInfo = {}
    },
    
    // 加载文档数据
    loadDocuments() {
      const data = localStorage.getItem(`documents_${this.projectId}`);
      this.documents = data ? JSON.parse(data) : [];
    },
    
    // 加载待办事项
    loadTodos() {
      const data = localStorage.getItem(`todos_${this.projectId}`);
      this.todos = data ? JSON.parse(data) : [];
    },
    
    // 加载项目信息
    loadProjectInfo() {
      const data = localStorage.getItem(`projectInfo_${this.projectId}`);
      this.projectInfo = data ? JSON.parse(data) : {};
    },
    handleTabChange(tab) {
      // 切换标签时按需加载数据
      if (tab.name === 'documents' && this.documents.length === 0) {
        this.loadDocuments()
      } else if (tab.name === 'todos' && this.todos.length === 0) {
        this.loadTodos()
      }
    }
  }
}
</script>